<template>
    <div class="header_view">
        <el-row>
            <el-col :span="12">
                <div class="grid-content ep-bg-purple">
                    <div class="left">
                        <i class="logo1"></i>
                        <span>游爱说内容管理系统</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content ep-bg-purple-light">
                    <div class="right">
                        <div class="user" v-if="isdenglu">
                            <i class="logo3">
                                <el-icon>
                                    <Place />
                                </el-icon>
                            </i>
                            <span>{{ myname }}</span> |
                            <span @click="Signout">退出登录</span>
                        </div>
                        <div class="toLogin" v-else>
                            <i class="logo2">
                                <el-icon>
                                    <Connection />
                                </el-icon>
                            </i>
                            <span @click="toLogin">请登录</span> |
                            <!-- <span @click="toRegister">注册</span> -->
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
const isdenglu = ref(false);

// 登录
function toLogin() {
    router.push('/login');
}


const myname = localStorage.getItem("USERNAME")

// 注册
// function toRegister() {
//     // isdenglu.value = true;
//     router.push('/register');
// }

// 获取登录状态
const getlogin = localStorage.getItem('ISLOGIN');
if (getlogin) {
    // 设置登录状态
    isdenglu.value = true;
}
// 退出登录
const Signout = () => {
    ElMessageBox.confirm(
        '你确定要退出登陆吗？',
        '退出登录',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '已退出登录',
            })
            // 移除登录状态
            localStorage.removeItem('ISLOGIN');
            isdenglu.value = false;
            console.log('退出登录');
            // 刷新界面
            window.location.reload();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退出登录',
            })
        })
}

// 接受登录状态
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
const username = ref('');
const route = useRoute();
onMounted(() => {
    username.value = route.query.name as string;
    console.log(username.value);
}
);

// // const name = localStorage.getItem('username');
// const name = router.currentRoute.value.query.name;
// // 如果已经注册了，就显示登录状态
// if (name) {
//     isdenglu.value = true;
// }
// console.log("name->", router.currentRoute.value.query.name);


</script>

<style scoped>
.el-icon svg {
    height: 1em;
    width: 1em;
}
</style>

<style scoped lang="scss">
// @import "./common/scss/variable.scss";
.header_view {
    width: 100%;
    height: 8vh;
    white-space: nowrap;
    position: fixed;
}

// 左部
.left {
    height: 8vh;
    line-height: 8vh;
    margin-left: 2vw;

    .logo1 {}

    span {
        font-size: 18px;
        font-weight: bolder;
    }
}

// 右部
.right {
    height: 8vh;
    line-height: 8vh;
    clear: both;

    .toLogin,
    .user {
        float: right;
        font-size: 14px;
        margin-right: 5vw;

        span {
            margin: 0 0.5vw;
            cursor: pointer;
        }

        span:hover {
            color: #ffffff;
        }
    }
}
</style>